<!-- @format -->

<template>
  <div :ref="ids" :id="ids" :style="{ width: width, height: height }"></div>
</template>

<script>
import * as echarts from 'echarts';
import resize from './mixins/resize'
export default {
  name: 'nu-echarts',
  mixins: [resize],
  data() {
    return {
      myChart: null
    }
  },
  mounted() {
    this.drawLine();
  },
  components: {},
  computed: {
    ids() {
      return 'myChart' + Math.round(Math.random() * 1000);
    },
  },
  props: {
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '100%',
    },
    option: {
      type: Object,
    },
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(this.$refs[`${this.ids}`]);
      // 绘制图表
      this.myChart.setOption(this.option);
      this.myChart.on('click', params => {
        this.$emit('onclick', params);
      });
    },
  },
};
</script>
<style></style>
